<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05条件渲染</title>
</head>
<body>
<!--
1. 条件渲染指令
  v-if
  v-else
  v-show
2. 比较v-if与v-show
  如果需要频繁切换 v-show 比较好(1.v-if是从内存中去除(再次切换要重新创建)，页面不存在任何显示;2.v-show是根据样式隐藏，内存中还在)
-->
  <div id="demo">
    <!-- 类似于，if 与 else   -->
    <p v-if="ok">成功了</p>
    <!-- 默认 v-else="true"   -->
    <p v-else>失败</p>

    <p v-show="ok">表白成功</p>
    <p v-show="!ok">表白失败</p>

    <button @click="ok=!ok">切换</button>
  </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script>
      new Vue({
        el: '#demo',
        data:{
          ok:false,
        }
      });
    </script>
</body>
</html>
